<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 按钮 -->
        <div class="hmmm_wrapper">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="$router.push('/questions/new/:id')"
            style="font-size: 14px"
          >
            新增试题
          </el-button>
        </div>

        <!-- 表单放的位置 -->
        <lxyFrom @click="searchFind" @clickTwo="fn"></lxyFrom>

        <!-- 提示 -->
        <el-alert :title="`数据一共 ${total} 条`" type="info" :closable="false" show-icon>
        </el-alert>

        <!-- 表格 -->
        <el-table
          size="medium"
          :data="tableData"
          :header-cell-style="{
            borderBottom: '2px solid #e8e8e8',
            background: '#fafafa'
          }"
          style="width: 100%"
          :row-style="{ height: '72px' }"
        >
          <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型" :formatter="questionTypeFn">
          </el-table-column>
          <el-table-column prop="question" label="题干" width="280">
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{ row }">
              {{ timeFn(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" :formatter="difficultyFn">
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="210">
            <template #default="{ row }">
              <el-tooltip class="item" effect="dark" content="预览" placement="top">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-view"
                  @click="previewTopic(row)"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="修改" placement="top">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  circle
                  @click="$router.push(`/questions/new/${row.id}`)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  circle
                  @click="deleteTopic(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="加入精选" placement="top">
                <el-button
                  type="warning"
                  @click="addSelected(row)"
                  plain
                  icon="el-icon-check"
                  circle
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="hmmm_wrapper">
          <el-pagination
            background
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout=" prev,pager,next,sizes,jumper"
            :total="total"
            @size-change="pageDataAmount"
            @current-change="goToPage"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 弹窗-对话框 -->
      <el-dialog @open="openDialogFn()" width="900px" title="题目预览" :visible.sync="showDialog">
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【题型】： {{ questionTypeFn('', '', newInfo.questionType, '') }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【编号】：{{ newInfo.id }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【难度】： {{ difficultyFn('', '', newInfo.difficulty, '') }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【标签】：{{ newInfo.tags || '' }}</div>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">【学科】：{{ newInfo.subjectName }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【目录】：{{ newInfo.directoryName }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">【方向】：{{ newInfo.direction }}</div>
          </el-col>
        </el-row>
        <br />
        <hr />
        <div class="grid-content bg-purple">
          【题干】：
          <div style="color: blue" v-html="newInfo.question"></div>
        </div>
        <div v-if="newInfo.questionType !== '3'">
          <p>
            {{ questionTypeFn('', '', newInfo.questionType, '') }}题
            选项：（以下选中的选项为正确答案）
          </p>
          <!-- 单选框 -->
          <el-radio-group
            v-for="item in newInfo.options"
            :key="item.id"
            :value="item.isRight === 1 ? item.code : ''"
          >
            <el-radio :label="item.code">{{ item.code }}: {{ item.title }} </el-radio><br />
          </el-radio-group>
        </div>
        <hr />
        <div class="margin">
          【参考答案】：
          <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
          <div class="margin" v-if="showVideo">
            <video controls style="height: 300px">
              <source :src="newInfo.videoURL" type="video/mp4" width="400" />
            </video>
          </div>
        </div>
        <hr />
        <div class="margin2" v-html="` 【答案解析】：${newInfo.answer}`"></div>
        <hr />
        <div class="margin">【题目备注】：{{ newInfo.remarks }}</div>
        <div class="hmmm_wrapper">
          <el-button type="primary" @click="showDialog = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import lxyFrom from '@/module-hmmm/pages/lxy/lxyFrom'
import { difficulty, questionType } from '@/api/hmmm/constants.js'
import {
  basicsListAPI,
  basicsRemoveAPI,
  basicsDetailAPI,
  basicsChoiceAddAPI
} from '@/api/hmmm/questions.js'

import dayjs from 'dayjs'
export default {
  name: 'questions',
  data() {
    return {
      page: 1, // 当前页数
      pagesize: 5, // 当前页数据量
      total: 0, // 共用多少数据
      // ----------------
      showDialog: false, // 弹出框显示隐藏
      showVideo: false, // 弹出框内视频显示隐藏
      tableData: [], // 表格数据
      rowInfo: [], // 每一行的行信息
      newInfo: {} // 弹窗内要用的数据
    }
  },
  created() {
    this.getQuestionList() // 渲染列表API
  },

  methods: {
    // 每页多少条数据
    pageDataAmount(val) {
      this.pagesize = val
      this.getQuestionList()
    },
    // 页数发生改变触发
    goToPage(val) {
      this.page = val
      this.getQuestionList()
    },
    // 渲染列表
    async getQuestionList(valData) {
      const { data } = await basicsListAPI({
        page: this.page,
        pagesize: this.pagesize,
        ...valData
      })
      this.total = data.counts // 总共数据量
      this.tableData = data.items
    },
    // 删除题目
    deleteTopic(Topic) {
      this.$confirm('您确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await basicsRemoveAPI(Topic)
          if (data.success) this.$message.success('删除成功!')
          this.getQuestionList()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 加入精选题目
    addSelected(Topic) {
      this.$confirm('您确定加入精选吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await basicsChoiceAddAPI({
            ...Topic,
            choiceState: 1
          })
          if (data.success) this.$message.success('加入精选成功!')
          this.getQuestionList()
        })
        .catch(() => {
          this.$message.info('已取消加入精选')
        })
    },
    // 题目预览
    previewTopic(Topic) {
      this.showDialog = true
      this.rowInfo = Topic
    },
    // 题目预览详细信息
    async openDialogFn() {
      const { data } = await basicsDetailAPI(this.rowInfo)
      this.newInfo = data
    },
    // 处理题型
    questionTypeFn(row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 处理难度
    difficultyFn(row, column, cellValue, index) {
      const obj = difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 处理时间格式
    timeFn(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 搜索
    searchFind(valObj) {
      this.getQuestionList(valObj)
    },
    // 子组件重新渲染
    fn() {
      this.getQuestionList() // 渲染列表API
    }
  },

  components: {
    lxyFrom // 表格
  }
}
</script>

<style scoped>
.hmmm_wrapper {
  display: flex;
  justify-content: flex-end;
}
.el-button {
  margin-bottom: 15px;
}
.el-alert {
  margin-bottom: 15px;
}
.el-table {
  margin: 15px 0;
}
.margin {
  margin: 15px 0;
}
.margin2 {
  display: flex;
  align-items: center;
}
.el-radio-group {
  display: block;
  margin: 15px 0;
}
</style>
